<template>
	<view class="item-block">
		<view class="header">
			<view class="header_item">
				<view class="box">
					<u-badge numberType="overflow" type="error" max="99" :value="formobj.unRead"></u-badge>
				</view>
				<view class="manage" @click="teammessage">
					<view class="iconfont icon-xiaoxi">
					</view>
				</view>
				<view class="logo_avatar">
					<view class="avatar">
						<u-avatar :src="formobj.teamLogo" size="70"></u-avatar>
					</view>
					<view class="avatar_item">
						<view class="top_item">
							组队方式
						</view>
						<view class="bot_item">
							{{formobj.teamType==1?'公开':'私密'}}
						</view>
					</view>
				</view>
				<view class="name_item">
					{{formobj.teamName}}
				</view>
				<view class="remove_item">
					队伍介绍 : {{formobj.teamDesc}}
				</view>
			</view>
			<view class="bot_style">
			</view>
		</view>
		<view class="information">
			<view class="setup" @click='manage' v-if="formobj.manageMenu==1">
				邀请队友
			</view>
			<view class="detail_item">
				<view class="title">
					比赛信息
				</view>
				<view class="address_item">
					<span class="iconfont icon-dizhi"></span>
					<span class="address_text">{{formobj.placeName}}</span>
				</view>
				<view class="item">
					赛事名称 : {{formobj.raceName}}
				</view>
				<view class="item">
					开始时间 : {{formobj.startTime}}
				</view>

				<view class="item">
					参赛队伍 : {{formobj.joinNum}}/{{formobj.teamNum}}支
				</view>
			</view>
			<view class="detail_list">
				<view class="title">
					参赛信息
				</view>
				<view class="detail_list_item" v-for="(item,index) in formobj.players" :key='index'>
					<view class="">
						<u-avatar :src="item.avatarUrl" size="30"></u-avatar>
					</view>
					<view class="item_name">
						{{item.nickName}}
					</view>
					<view class="item_time">
						{{item.insertTime}}
					</view>
					<view class="item_title">
						已加入
					</view>
				</view>
			</view>
		</view>
		<view class="bottext">
			<view class="" v-if="formobj.manageMenu==1" @click="exit(1)">
				解散队伍?
			</view>
			<view class="" v-if="formobj.isPlayer==1 && formobj.manageMenu==0" @click="exit(2)">
				退出队伍?
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ids: {},
				formobj: {},
			}
		},
		created() {

		},
		onLoad(options) {
			// 从路由参数中获取传递的值	
			this.ids = JSON.parse(decodeURIComponent(options.id));
			console.log(this.ids);
			this.formdetail()

		},
		mounted() {},
		methods: {
			// 队伍消息
			teammessage() {
				uni.navigateTo({
					url: '/subpackage1/eventpage/examine_list?id=' + encodeURIComponent(this.ids.teamId),
					events: {
						reverseData: (data) => {
							if (data.data) {
								this.formdetail()
							}
						},

					},
				});
			},
			//队伍详情,只有队长可以点击
			manage() {
				const objStr = JSON.stringify(this.ids);
				uni.navigateTo({
					url: '/subpackage1/eventpage/event_information?id=' + encodeURIComponent(objStr)

				});
			},
			// 表单详情
			formdetail() {
				const that = this
				this.$request(`/race/teamDetail/${this.ids.teamId}`, 'get')
					.then(
						res => {
							that.formobj = res.data.data
						})
			},
			// 解散队伍/退出队伍
			exit(e) {
				const that = this
				uni.showModal({
					title: e == 1 ? '解散提示' : '退出提示',
					content: e == 1 ? '此操作将解散该退伍,是否确认解散?' : '此操作将退出该退伍,是否确认退出?',
					confirmText: '确认',
					success(res) {
						if (res.confirm) {
							const data = {
								raceId: that.ids.raceId,
								teamId: that.ids.teamId,
								messageType: e
							}
							that.$request(`/message/send`, 'post', data)
								.then(
									res => {
										if (res.data.data) {
											that.$refs.uToast.show({
												type: 'success',
												message: "提交成功",
												iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',

											})

										} else {
											that.$refs.uToast.show({
												type: 'error',
												message: "你已提交,请耐心等待",
												iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

											})
										}
									})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}

					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-block {
		height: 100vh;
		overflow: auto;

		.header {
			height: 500rpx;
			background-image: url('https://web.ptgolf.net/image/webchat/13.png');
			background-size: 100% 100%;

			.bot_style {
				margin-top: 40rpx;
				height: 65rpx;
				border-radius: 40rpx 40rpx 0 0;
				background-color: #fff;
			}

			.header_item {
				padding: 0 40rpx 0 40rpx;
				height: 400rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				position: relative;

				.box {
					position: absolute;
					top: 28rpx;
					right: 28rpx;
					z-index: 99;
				}

				.manage {
					position: absolute;
					top: 30rpx;
					right: 30rpx;
					color: #ffffff;
					// width: 120rpx;
					// height: 120rpx;
					font-weight: 600;
					// background-color: #e7a681;
					text-align: center;
					display: flex;
					border-radius: 50%;
					flex-direction: column;
					justify-content: center;
					// position: relative;



					.icon-xiaoxi {
						font-size: 60rpx;
					}

					// .icontitle {
					// 	font-size: 20rpx;
					// }
				}

				.logo_avatar {
					display: flex;
					align-items: center;

					.avatar {
						height: 140rpx;
						width: 140rpx;
					}

					.avatar_item {
						margin-left: 20rpx;
						color: #fff;

						.top_item {
							font-weight: 600;

						}

						.bot_item {
							font-size: 28rpx;
						}
					}
				}

				.name_item {
					margin-top: 20rpx;
					font-weight: 600;
					font-size: 42rpx;
					color: #fff;


				}

				.remove_item {
					margin-top: 10rpx;
					color: #fff;
					font-size: 28rpx;
				}

			}
		}

		.bottext {
			color: #de3600;
			font-size: 12px;
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}

		.information {
			padding: 0 40rpx;
			position: relative;

			.setup {
				position: absolute;
				top: 0;
				right: 40rpx;
				font-weight: 600;
				font-size: 26rpx;
				color: #de3600;

			}

			.detail_item {
				color: #000;
				font-size: 26rpx;

				.title {
					font-size: 34rpx;
					font-weight: 600;
				}

				.item {
					margin-top: 10rpx;
				}

				.address_item {
					margin-top: 10rpx;

					.icon-dizhi {
						font-size: 20rpx;
						border-radius: 20rpx;
						padding: 4rpx;
						background-color: #de3600;
						color: #fff;
						margin-right: 6rpx;
					}

					.address_text {
						font-size: 24rpx;

					}
				}
			}

			.detail_list .detail_list_item:nth-child(2n) {
				background-color: #f4f4f4;
			}

			.detail_list {
				margin-top: 40rpx;

				.item_name {
					width: 140rpx;
					text-align: center;
				}

				.item_time {
					width: 35%;
					white-space: nowrap;
					/* 防止文字换行 */
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.item_title {
					width: 20%;
					white-space: nowrap;
					/* 防止文字换行 */
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
				}

				.title {
					font-size: 34rpx;
					font-weight: 600;
					margin-bottom: 20rpx;
				}



				.detail_list_item {
					padding: 20rpx 30rpx;
					display: flex;
					border-radius: 16rpx;
					align-items: center;
					font-size: 25rpx;
					justify-content: space-between;

				}
			}
		}

	}
</style>